<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { ChevronDown20Regular, WeatherSunny16Regular, WeatherMoon16Regular } from '@vicons/fluent'
import { Icon } from '@vicons/utils'
import { storeToRefs } from 'pinia'
import { useGlobalStore } from '@/stores/global'

// 全局存储
const globalStore = useGlobalStore()
const { currentLanguage, isDarkTheme, langSelectOption } = storeToRefs(globalStore)

const { t } = useI18n()

// 设置值
const value = reactive({
  language: '',
  theme: 'light',
})

// 修改语言
const onLangChange = (value: string) => {
  globalStore.setSystemLang(value)
}

// 修改主题
const onThemeChange = (value: string) => {
  globalStore.setDarkTheme(value !== 'light')
}

// 关闭页面时调用
const onClose = () => {}

onMounted(() => {
  value.language = currentLanguage.value
  value.theme = isDarkTheme.value ? 'dark' : 'light'
})

defineExpose({
  onClose,
})
</script>

<template>
  <div>
    <n-list bordered>
      <n-list-item>
        <n-thing :description="t('setting.general.theme')"></n-thing>
        <template #suffix>
          <n-radio-group size="small" v-model:value="value.theme" @update:value="onThemeChange">
            <n-radio-button value="light">
              <div class="flex items-center">
                <Icon><WeatherSunny16Regular /></Icon>
                <span class="ml-1">{{ t('setting.general.themeLight') }}</span>
              </div>
            </n-radio-button>
            <n-radio-button value="dark">
              <div class="flex items-center">
                <Icon><WeatherMoon16Regular /></Icon>
                <span class="ml-1">{{ t('setting.general.themeDark') }}</span>
              </div>
            </n-radio-button>
          </n-radio-group>
        </template>
      </n-list-item>
      <n-list-item>
        <n-thing :description="t('setting.general.language')"></n-thing>
        <template #suffix>
          <n-popselect
            v-model:value="value.language"
            :options="langSelectOption"
            trigger="click"
            @update:value="onLangChange"
          >
            <n-button type="default" size="small" icon-placement="right" text>
              <template #icon>
                <Icon><ChevronDown20Regular /></Icon>
              </template>
              {{ langSelectOption.find((item) => item.value === value.language)?.label }}
            </n-button>
          </n-popselect>
        </template>
      </n-list-item>
      <!-- <n-list-item>
        <n-thing>
          <template #description>
            <div class="flex justify-between">
              <a-tooltip trigger="hover" placement="topLeft">
                <div class="cursor-help flex items-center">
                  <span>设置示例：标签</span>
                  <Icon class="ml-1"><QuestionCircle20Regular /></Icon>
                </div>
                <template #title> 说明文本 </template>
              </a-tooltip>
              <div class="flex justify-end items-center w-[200px]">
                <n-dynamic-tags size="small" v-model:value="value.tags" />
              </div>
            </div>
          </template>
        </n-thing>
      </n-list-item>
      <n-list-item>
        <n-thing description="设置示例：开关"></n-thing>
        <template #suffix>
          <n-switch v-model:value="value.active" size="small"></n-switch>
        </template>
      </n-list-item> -->
    </n-list>
  </div>
</template>

<style lang="scss" scoped>
:deep(.n-list),
:deep(.n-list .n-list-item .n-list-item__divider) {
  transition: none;
}
</style>
